/**
 * Story
 * =====
 * This is a row representing a story mainly used in the backlog
 */
li.story {
  background-color: rgba(255,255,255,.9);
  cursor: move;
  padding: 8px 0 8px 8px;
  overflow: hidden;
  clear: left;
  margin: 0;
  position: relative;
  border-top: solid 2px #eee;
  line-height: 1.4;
  font-size: 13px;
  color: #444;

  &.has-color {
    border-top-color: white;
    + li.story {
      border-top-color: white;
    }
  }

  &:first-child {
    border-top: none;
  }

  .data {
    cursor: text;
  }

  /* we could use this as the drag handle if it were bigger */
  .background-color-indicator {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 4px;
    left: 0;
    margin: 0;
    @include transition(all .2s ease-out);
    &.no-color {
      width: 0;
    }
  }
  &:hover .background-color-indicator {
    left: 0;
    width: 7px;
  }

  /* place holder is shown when a list is empty and dragging across lists */
  &.placeholder {
    height: 1px;
  }
  &>.unique-id {
    @include table-col($col-unique-id-width);

    >.data {
      margin-bottom: 0;
      padding-bottom: 0;
      font-weight: 800;
    }
    >.story-actions {
      border-top: none;
      margin: 0 0 0 1px;
      padding: 2px 0 0 3px;
      overflow: hidden;
    }
    .sprint-story-info {
      border-top: none;
    }
    .sprint {
      padding: 8px 0 2px 3px;
      .tab {
        border: 1px solid rgba(0,0,0,0.25);
        padding: 2px 8px;
        @include border-radius(3px);
        display: inline;
        a {
          color: #777;
          &:hover {
            text-decoration: none;
            color: #444;
          }
        }
        &:hover {
          border-color: rgba(0,0,0,0.35);
          background-color: rgba(0,0,0,0.05);
        }
      }
    }
    .status {
      padding: 5px 0 0 3px;
      position: relative;
      min-height: 16px;
      .tab {
        cursor: pointer;
        &.disabled {
          cursor: default;
        }
        background-color: lighten($title-area-color, 15%);
        color: white;
        padding: 3px 8px;
        @include border-radius(3px);
        display: inline;
        a {
          color: white;
          &:hover {
            text-decoration: none;
          }
        }
        @include status-code-arrows(0.75em);
        @include status-code-colors;
      }
    }
  }
  &>.user-story, &>.acceptance-criteria, &>.comments {
    @include table-col($col-main-width);
    &>div {
      margin-bottom: 0;
      &:nth-child(2),&:nth-child(3) {
        border-top: 0;
      };
    }
  }
  &>.score-50, &>.score-90, &>.score {
    @include table-col($col-score-width);
    &>div {
      min-height: 1.1em;
    }
  }
  &>.score {
    @include table-col($col-score-width * 2);
  }
  &>.cost-formatted { @include table-col($col-cost-width); text-align: right; &>div { border: none; padding: 3px; } }
  &>.days-formatted { /* $col-days-width */
    &>div {
      margin: 1px 0 1px 1px;
      padding: 3px;
    }
    text-align: right;
  }

  &>div.user-story {
    /* ensure div wraps the children */
    &>div {
      overflow: hidden;
    }
    /* as a, i want to, so i can text */
    .heading {
      float: left;
      padding-right: 0.5em;
      color: #888;
      font-style: italic;
    }
  }
  ul.acceptance-criteria {
    margin: 0;
    list-style: none;
    /* cross hair only enabled if item is editable */
    .index.cross-hair-enabled {
      cursor: move;
    }
    li:hover {
      .cross-hair-enabled.index {
        display: none;
      }
      .cross-hair-enabled.cross-hair-indicator {
        display: block;
      }
    }
    /* acceptance criteria row */
    li.criterion {
      margin: 0;
    }
    li.actions {
      margin-bottom: 4px;
      position: relative;
    }
    li.new-acceptance-criterion {
      margin: -2px 0 0 -2px;
    }
    .index {
      width: 1.5em;
      float: left;
      clear: left;
      display: block;
    }
    .cross-hair-indicator {
      width: 1.5em;
      cursor: move;
      float: left;
      clear: left;
      display: none;
      background: image-url('cross-hair.png') no-repeat left center;
    }
    .data {
      clear: right;
      cursor: text;
      margin-left: 1.5em;
    }
    li.target-order-highlight {
      height: 1.5em;
    }
  }
  a.urlified {
    color: #00D;
    cursor: text;
    &:hover {
      text-decoration: none;
    }
  }

  // Sorting
  &.ui-sortable-helper {
    border: none;
    @include rotate(-1deg);

    & * {
      cursor: move !important;
    }
  }
}
